<template>
    <div class="view">
        <div class="search-view">
            <Input 
                v-model="searchData.searchVal" 
                icon="ios-search" 
                placeholder="请输入姓名或者手机号" 
                style="width: 3rem;">
            </Input>
            <span style="color: #fff;">选择日期：</span>
            <DatePicker 
                type="date" 
                :value="searchData.date"
                format="yyyy-MM-dd"
                :options="options"
                style="width: 3rem"
                @on-change="changeDate">
            </DatePicker>
        </div>
        <div class="list-view">
            <XListView 
                :data="reserveInfoData"
                @on-action="clickAction"
                @on-change-page="changePage"
                @on-change-pageSize="changePageSize">
            </XListView>
        </div>
        <!-- 开厅弹窗 -->
		<div v-if="openData.isShow">
			<XMovieOpenModal 
				:data="openData"
				@on-submit="submitOpen">
			</XMovieOpenModal>
		</div>
    </div>
</template>

<script>
import $ from 'jquery'
import XListView from '@/pages/reserve/view/XListView'
import reserveService from '@/network/service/reserveService.js'
import roomService from '@/network/service/roomService.js'
import XMovieOpenModal from '@/pages/movie/view/XMovieOpenModal' //开厅
    export default {
        components: {XListView, XMovieOpenModal},
        data() {
            return {
                searchData: {
                    searchVal: '',
                    date: ''
                },
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() < Date.now() - 86400000;
                    }
                },
                reserveInfoData: {
                    listType: 'reserveInfo',
                    height: '',
                    data: [],
                    page: {
                        currentPage: 0,
                        pagesize: 20,
                        totalSize: 0,
                        key: ''
                    }
                },
                openData: { //开厅
                    isShow: false,
                    isLoading: false,
                    data: {},
                    row: null,
                    reserveRow: null,
                    lockTime: ''
                },
            }
        },
        mounted() {
            let input = $('.ivu-input');
            let table = $('.ivu-table');
            let selects = $('.ivu-select');
            let select = $('.ivu-page-options-elevator input');
            for(let i = 0; i < input.length; i++) {
                input[i].style.color = 'rgba(255, 255, 255, 0.6)'
            }
            for(let i = 0; i < table.length; i++) {
                table[i].style.color = 'rgba(255, 255, 255, 0.6)'
            }
            for(let i = 0; i < select.length; i++) {
                select[i].style.color = 'rgba(255, 255, 255, 0.6)'
            }
            for(let i = 0; i < selects.length; i++) {
                selects[i].style.color = 'rgba(255, 255, 255, 0.6)'
            }
            this.formatNowTime();
            this.getBookList();
        },
        methods: {
            formatNowTime() {
                var date = new Date();
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                var D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate());
                this.searchData.date = Y + M + D;
            },
            changePage(page) {
                this.reserveInfoData.currentPage = page - 1;
                this.getBookList();
            },
            changePageSize(pageSize) {
                this.reserveInfoData.pagesize = pageSize;
                this.getBookList()
            },
            changeDate(val) {
                this.searchData.date = val;
                this.getBookList();
            },
            clickAction(type, formData) {
                switch(type) {
                    case 'open':
                        this.openData.row = {
                            rid: formData.row.roomId,
                            name: formData.row.roomName
                        }
                        this.openData.isShow = true;
                        this.openData.data = {
                            phoneNum: formData.row.phoneNum,
                            name: formData.row.name,
                            number: formData.row.number,
                            hours: formData.row.bookHour,
                            bookNo: formData.row.bookingCode
                        }
                    break;
                    case 'cancel':
                        this.$Modal.confirm({
                            title: '取消预定',
                            content: '是否取消预订',
                            onOk: () => {
                                this.cancelBook(formData);
                            },
                            onCancel: () => {
                                this.$Message.info('Clicked cancel');
                            }
                        });
                    break;
                }
            },
            submitOpen(formData) {
                this.roomOpen(formData);
            },
            
            getBookList() {
                let params = {
                    scales: ['', ''].join(','),
                    date: this.searchData.date,
                    roomId: ''
                }
                reserveService.getBookList(params).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        this.reserveInfoData.data = result.data;
                        this.reserveInfoData.page.totalSize = result.totalSize;
                    } else {
                        this.$Message.error(resmsg);
                    }
                }, error => {
                    this.$Message.error('服务器异常，请稍后再试');
                })
            },
            cancelBook(formData) {
                reserveService.cancelBook(formData.row.bid).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        formData.row.status = 1;
                    } else {
                        this.$Message.error(resmsg);
                    }
                }, error => {
                    this.$Message.error('服务器异常，请稍后再试');
                })
            },
            roomOpen(formData) {
                this.openData.isLoading = true;
                let params = {
                    id: formData.id,
                    oid: formData.oid
                }
                roomService.roomOpen(params).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        this.openData.isShow = false;
                        this.openData.isLoading = false;
                    } else {
                        this.openData.isLoading = false;
                        this.$Message.error(resmsg);
                    }
                }, error =>{
                    this.openData.isLoading = false;
                    this.$Message.error('服务器异常，请稍后再试');
                })
            },
        }
    }
</script>

<style scoped lang="less">
.view {
    width: 100%;
    height: 100%;
    padding: .2rem;
    .search-view {
        margin-bottom: .2rem;
    }
    .list-view {
        color: #ffffff;
    }
}
</style>